<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>消息</title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<style type="text/css">
			.touxiang{
    		height:35px;
    		width:35px;
    		border-radius:50%;
    		margin-top:4px;
    	}
    	.top-bar{
    		background-color:#3CA6FD;
    	}
    	.top-bar h1,.top-bar a{
    		color:white;
    	}
    	.top-bar a span{
    		font-size:30px!important;
    	}
    	.search-box{
    		padding:5px 10px;
    	}
    	.search-box input{
    		margin-bottom: 0px;
    	}
    	.mui-bar-nav ~ .mui-content .mui-pull-top-pocket{
  			top: 60px !important;
		}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav top-bar">
		    <a class="mui-pull-left">
		    	<img src="images/touxiang.png" class="touxiang"/>
		    </a>
		    <h1 class="mui-title">消息</h1>
	    </header>
	    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
	  <div class="mui-scroll">
	    	<div class="mui-content">
				<div class="mui-input-row mui-search search-box">
				    <input type="search" class="mui-input-clear" placeholder="">
				</div>
			    <ul class="mui-table-view" id="table1">
			        <li class="mui-table-view-cell mui-media nchart">
			            <a href="javascript:;" class="nchart">
			                <img class="mui-media-object mui-pull-left" src="images/touxiang.png">
			                <div class="mui-media-body">
			                    武汉通信
			                    <p class="mui-ellipsis">项目经理：莉莉  客户经理：UIUC....</p>
			                </div>
			            </a>
			        </li>
			        <li class="mui-table-view-cell mui-media nchart">
			            <a href="javascript:;" class="nchart">
			                <img class="mui-media-object mui-pull-left" src="images/timg1.jpg">
			                <div class="mui-media-body">
			                    四川项目
			                    <p class="mui-ellipsis">项目经理：莉莉  客户经理：UIUC....</p>
			                </div>
			            </a>
			        </li>
			        <li class="mui-table-view-cell mui-media nchart">
			            <a href="javascript:;" class="nchart">
			                <img class="mui-media-object mui-pull-left" src="images/timg.jpg">
			                <div class="mui-media-body">
			                    	上海医药项目
			                    <p class="mui-ellipsis">项目经理：莉莉  客户经理：UIUC....</p>
			                </div>
			            </a>
			        </li>
			        <li class="mui-table-view-cell mui-media nchart">
			            <a href="javascript:;" class="nchart">
			                <img class="mui-media-object mui-pull-left" src="images/timg.jpg">
			                <div class="mui-media-body">
			                    	上海医药项目
			                    <p class="mui-ellipsis">项目经理：莉莉  客户经理：UIUC....</p>
			                </div>
			            </a>
			        </li>
			        <li class="mui-table-view-cell mui-media nchart">
			            <a href="javascript:;" class="nchart">
			                <img class="mui-media-object mui-pull-left" src="images/timg.jpg">
			                <div class="mui-media-body">
			                    	上海医药项目
			                    <p class="mui-ellipsis">项目经理：莉莉  客户经理：UIUC....</p>
			                </div>
			            </a>
			        </li><li class="mui-table-view-cell mui-media nchart">
			            <a href="javascript:;" class="nchart">
			                <img class="mui-media-object mui-pull-left" src="images/timg.jpg">
			                <div class="mui-media-body">
			                    	上海医药项目
			                    <p class="mui-ellipsis">项目经理：莉莉  客户经理：UIUC....</p>
			                </div>
			            </a>
			        </li><li class="mui-table-view-cell mui-media nchart">
			            <a href="javascript:;" class="nchart">
			                <img class="mui-media-object mui-pull-left" src="images/timg.jpg">
			                <div class="mui-media-body">
			                    	上海医药项目
			                    <p class="mui-ellipsis">项目经理：莉莉  客户经理：UIUC....</p>
			                </div>
			            </a>
			        </li>
			    </ul>
			</div>
	  </div>
	</div>
	</body>
	<script type="text/javascript">
		mui(".nchart").on('tap',".nchart",function(){
				mui.openWindow({
					url:"shuxie.html",
					id:"shuxie.html"
				})
			})
		
		
		
		mui.init({
	  pullRefresh : {
	    container:'#refreshContainer',
	    down : {
	      callback:pullfreshDown
	    },
	    up : {
	      callback :pullfreshUp 
	    }
	  }
	});
	
	function pullfreshDown(){
		setTimeout(function(){
			mui.getJSON("json/infor.json",function(data){
				for(var i = 0; i < data.inforlist.length; i++){
					var liNode = document.createElement('li');
					liNode.className = "mui-table-view-cell mui-media";
					liNode.innerHTML = "<a href='javascript:;'>"
					                   + "<img class='mui-media-object mui-pull-left' src="+ data.inforlist[i]['inforImgSrc']+">"
					                   + "<div class='mui-media-body'>"
					                   + data.inforlist[i]['inforTitle']
					                   + "<p class='mui-ellipsis'>"
					                   + data.inforlist[i]['inforContent']
					                   + "</p>"
					                   + "</div>"
					                   + "</a>";
					var table1 = document.getElementById('table1');
					table1.insertBefore(liNode,table1.childNodes[0]);
				}
			})
			
			
			
			mui("#refreshContainer").pullRefresh().endPulldownToRefresh();
			
		},1500);
		
	}
	function pullfreshUp(){
			setTimeout(function(){
				var liNode = document.createElement('li');
				liNode.className = "mui-table-view-cell mui-media";
				liNode.innerHTML = "<a href='javascript:;'>"
				                   + "<img class='mui-media-object mui-pull-left' src='images/timg4.jpg'>"
				                   + "<div class='mui-media-body'>"
				                   + "上海医药项目"
				                   + "<p class='mui-ellipsis'>项目经理：李丽 客户经理：曲奇.......</p>"
				                   + "</div>"	                   
				                   + "</a>";
				var table1 = document.getElementById('table1');
				table1.appendChild(liNode);
				mui("#refreshContainer").pullRefresh().endPullupToRefresh();
			},1500);		
	}
	
	
	
			mui(".mui_xiangmu").on('tap',"#mui_xiangmu",function(){
				mui.openWindow({
					url:"yingyong.html",
					id:"yingyong.html"
				})
			})
			
			mui(".mui_shuxie").on('tap',"#mui_shuxie",function(){
				mui.openWindow({
					url:"shuxie.html",
					id:"shuxie.html"
				})
			})
	</script>
</html>
